<template>
  <div :class="[
    'b-filter flex flex-col cursor-pointer',
    {
      'b-filter--collapse': currentCollapse
    }
  ]">
    <div class="b-filter__top flex justify-between items-center"
         @click="onCollapse">
      <div class="b-filter__top-left">
        <img :src="toggleFilterImg"
             width="14"
             alt=""
             v-if="toggleFilterImg" />
        <span>{{ $t('custom.filter') }}</span>
      </div>
      <div class="b-filter__top-right">
        <ZTag type="green" v-if="display.total">
          <span>{{ display.total }} Filters</span>
          <ZIcon icon="el-icon-close"
                 :size="12"
                 @click.stop="onDeleteAll" />
        </ZTag>
      </div>
    </div>
    <div class="flex flex-col b-filter__content overflow-hidden">
      <template v-if="fieldsType==='Integrations'">
          <div class="b-filter__content-item flex flex-col">
        <span>Type</span>
        <el-select v-model="value.integrationsBy"
                   @change="onChange"
                   size="small"
                   >
                   <el-option v-for="item in fieldsIntegrations"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
        </el-select>
      </div>

      </template>
      <template v-else>
        <div class="b-filter__content-item flex flex-col"
           v-if="readyNumAuth">
        <span>{{ readyNumLabel ? readyNumLabel :"Ready" }}</span>
        <div class="flex items-center">
          <el-input-number v-model="value.readyMin"
                           placeholder="0"
                           @change="onChange"
                           size="mini"
                           :min="0"
                           :max="value.readyMax ? value.readyMax : 0"></el-input-number>
          <ZIcon icon="el-icon-minus"
                 :size="12"
                 style="font-weight: 900" />
          <el-input-number v-model="value.readyMax"
                           @change="onChange"
                           :min="value.readyMin ? value.readyMin : 0"
                           size="mini"
                           placeholder="0"></el-input-number>
        </div>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="receivedNumAuth">
        <span>{{ receivedNumLabel ? readyNumLabel :"Received" }}</span>
        <div class="flex items-center">
          <el-input-number v-model="value.receivedMin"
                           placeholder="0"
                           @change="onChange"
                           size="mini"
                           :min="0"
                           :max="value.receivedMax ? value.receivedMax : 0"></el-input-number>
          <ZIcon icon="el-icon-minus"
                 :size="12"
                 style="font-weight: 900" />
          <el-input-number v-model="value.receivedMax"
                           @change="onChange"
                           :min="value.receivedMin ? value.receivedMin : 0"
                           size="mini"
                           placeholder="0"></el-input-number>
        </div>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="readNumAuth">
        <span>{{ readNumLabel ? readNumLabel :"Read" }}</span>
        <div class="flex items-center">
          <el-input-number v-model="value.readMin"
                           placeholder="0"
                           @change="onChange"
                           size="mini"
                           :min="0"
                           :max="value.readMax ? value.readMax : 0"></el-input-number>
          <ZIcon icon="el-icon-minus"
                 :size="12"
                 style="font-weight: 900" />
          <el-input-number v-model="value.readMax"
                           @change="onChange"
                           :min="value.readMin ? value.readMin : 0"
                           size="mini"
                           placeholder="0"></el-input-number>
        </div>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="typeAuth">
        <span>{{ typeLabel ? typeLabel : $t('custom.type') }}</span>
        <el-select v-model="value.type"
                   :disabled="model === 'selection'"
                   multiple
                   size="small"
                   collapse-tags
                   @change="onChange"
                   placeholder="Please select">
          <el-option v-for="item in businessTypes"
                     :key="item.dictLabel"
                     :label="item.dictLabel"
                     :value="item.dictValue">
          </el-option>
        </el-select>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="statusAuth">
        <span>{{ statusLabel ? statusLabel : $t('status.name') }}</span>

        <el-select v-model="value.status"
                   multiple
                   size="small"
                   @change="onChange"
                   collapse-tags
                   clearable
                   placeholder="Please select">
          <el-option v-for="item in statuss"
                     :key="item.dictLabel"
                     :label="item.dictLabel"
                     :value="item.dictValue">
          </el-option>
        </el-select>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="comIsDashboardShow">
        <span>{{ $t('custom.dashboardType') }}</span>
        
        <el-select v-model="value.dashboardType"
                   size="small"
                   @change="onChange"
                   clearable
                   placeholder="Please select">
          <el-option v-for="(item,index) in dashboardTypes"
                     :key="index"
                     :label="item.lable"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="comWidgetTypeShow">
        <span>{{ $t('custom.widgetType') }}</span>
        <el-select v-model="value.gadgetType"
                   multiple
                   size="small"
                   @change="onChange"
                   collapse-tags
                   clearable
                   placeholder="Please select">
          <el-option v-for="item in gadgetTypes"
                     :key="item.key"
                     :label="item.title"
                     :value="item.key">
          </el-option>
        </el-select>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="sharedAuth">
        <span>{{
            sharedLabel ? sharedLabel : $t('custom.dataset.shared')
        }}</span>

        <el-select v-model="value.shared"
                   size="small"
                   placeholder="Please select"
                   @change="onChange"
                   clearable>
          <el-option v-for="item in shares"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="modelNumAuth">
        <span>{{ modelNumLabel ? modelNumLabel : $t('statement.lr') }}</span>
        <div class="flex items-center">
          <el-input-number v-model="value.reportMin"
                           placeholder="0"
                           @change="onChange"
                           size="mini"
                           :min="0"
                           :max="value.reportMax ? value.reportMax : 0"></el-input-number>
          <ZIcon icon="el-icon-minus"
                 :size="12"
                 style="font-weight: 900" />
          <el-input-number v-model="value.reportMax"
                           @change="onChange"
                           :min="value.reportMin ? value.reportMin : 0"
                           size="mini"
                           placeholder="0"></el-input-number>
        </div>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="widgetNumAuth">
        <span>Link Widgets</span>
        <div class="flex items-center">
          <el-input-number v-model="value.widgetMin"
                           placeholder="0"
                           @change="onChange"
                           size="mini"
                           :min="0"
                           :max="value.widgetMax ? value.widgetMax : 0"></el-input-number>
          <ZIcon icon="el-icon-minus"
                 :size="12"
                 style="font-weight: 900" />
          <el-input-number v-model="value.widgetMax"
                           @change="onChange"
                           :min="value.widgetMin ? value.widgetMin : 0"
                           size="mini"
                           placeholder="0"></el-input-number>
        </div>
      </div>
   
      <div class="b-filter__content-item flex flex-col"
           v-if="tagListAuth">
        <span>{{ tagListLabel ? tagListLabel : 'Tag' }}</span>

        <el-select v-model="value.tagList"
                   filterable
                   multiple
                   @change="onChange"
                   collapse-tags
                   clearable
                   size="small"
                   :placeholder="$t('select')">
          <el-option v-for="(item, index) in tags"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="lastSyncDateAuth">
        <span>{{
            lastSyncDateLabel ? lastSyncDateLabel : $t('statement.lsd')
        }}</span>
        <el-date-picker v-model="value.lastSyncDate"
                        type="datetimerange"
                        @change="onChange"
                        unlink-panels
                        style="width: 100%"
                        range-separator="-"
                        :start-placeholder="$t('datePicker.start')"
                        :end-placeholder="$t('datePicker.end')">>
        </el-date-picker>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="createDateAuth">
        <span>{{
            createDateLabel ? createDateLabel : $t('statement.cd')
        }}</span>

        <el-date-picker v-model="value.createDate"
                        type="datetimerange"
                        unlink-panels
                        @change="onChange"
                        style="width: 100%"
                        range-separator="-"
                        :start-placeholder="$t('datePicker.start')"
                        :end-placeholder="$t('datePicker.end')">>
        </el-date-picker>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="creatorAuth">
        <span>{{ creatorLabel ? creatorLabel : $t('attribute.creator') }}</span>

        <el-select v-model="value.creator"
                   filterable
                   multiple
                   size="small"
                   @change="onChange"
                   clearable
                   collapse-tags
                   :placeholder="$t('placeholder.ps')"
                   popper-class="user-popper">
          <el-option v-for="item in users"
                     :key="item.id"
                     :label="item.realName"
                     :value="item.id">
            <div class="user-popper-item flex items-center">
              <el-avatar :size="28"
                         :src="item.headUrl"> </el-avatar>
              <span class="header_name">{{ item.realName }}</span>
              <ZIcon icon="cuifont icon_checkmark"
                     :size="12"
                     style="margin-left: auto" />
            </div>
          </el-option>
        </el-select>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="updateDateAuth">
        <span>{{
            updateDateLabel ? updateDateLabel : $t('statement.lmd')
        }}</span>

        <el-date-picker v-model="value.updateDate"
                        type="datetimerange"
                        unlink-panels
                        @change="onChange"
                        range-separator="-"
                        style="width: 100%"
                        :start-placeholder="$t('datePicker.start')"
                        :end-placeholder="$t('datePicker.end')">
        </el-date-picker>
      </div>
      <div class="b-filter__content-item flex flex-col"
           v-if="updateByAuth">
        <span>{{ updateByLabel ? updateByLabel : $t('statement.lmb') }}</span>
        <el-select v-model="value.updateBy"
                   filterable
                   multiple
                   @change="onChange"
                   clearable
                   collapse-tags
                   size="small"
                   :placeholder="$t('placeholder.ps')"
                   popper-class="user-popper">
          <el-option v-for="item in users"
                     :key="item.id"
                     :label="item.realName"
                     :value="item.id">
            <div class="user-popper-item flex items-center">
              <el-avatar :size="28"
                         :src="item.headUrl"> </el-avatar>
              <span class="header_name">{{ item.realName }}</span>
              <ZIcon icon="cuifont icon_checkmark"
                     :size="12"
                     style="margin-left: auto" />
            </div>
          </el-option>
        </el-select>
      </div>
      </template>
    </div>
  </div>
</template>

<script>
import ZTag from '@/components/storybook/z-tag'
import ZIcon from '@/components/storybook/z-icon'
import useFilterLength from '@/components/storybook/hooks/useFilterLength'
import { visibleProps, valueProps } from './props'
import { dashboardGadgetList } from '@/utils/data-json'

export default {
  name: 'BFilter',
  components: {
    ZTag,
    ZIcon
  },
  props: {
    ...visibleProps,
    ...valueProps,
    value: {
      type: Object,
      default: () => ({})
    },
    model: String,
    fieldsType: String,
    businessTypes: {
      type: Array,
      default: () => []
    },
    omitKeys: {
      type: Array,
      default: () => []
    },
    statuss: {
      type: Array,
      default: () => []
    },
    tags: {
      type: Array,
      default: () => []
    },
    shares: {
      type: Array,
      default: () => [
        { label: 'Shared', value: 'Shared' },
        { label: 'Not Shared', value: 'NotShared' }
      ]
    },
    users: {
      type: Array,
      default: () => []
    },
    fieldsIntegrations: {
      type: Array,
      default: () => []
    },
    collapse: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      sourceCollapse: this.collapse,
      gadgetTypes: [],
      dashboardTypes:[
        {
          lable:'Dashboard',
          value:'report_layout'
        },
        {
          lable:'Report',
          value:'report_layout_page'
        }
      ]
    }
  },
  created () {
    if (this.$route.path === '/KPIs') {
      this.gadgetTypes = [{ key: 'chartgridgadget', title: 'KPI' }]
    }
    else {
      this.gadgetTypes = this.layoutListsOfwidget(this.$route.path === '/Slicer' ? 'slicer' : 'widget')
    }
  },
  computed: {
    toggleFilterImg () {
      return `${window.SITE_CONFIG['ossAddressURL']}/app/view_pageheader/filter_catalogue.png`
    },
    display () {
      return {
        total: useFilterLength(this.value, this.omitKeys)
      }
    },
    currentCollapse: {
      get () {
        return this.collapse
      },
      set (collapse) {
        this.sourceCollapse = collapse
        this.$emit('update:collapse', collapse)
      }
    },
    comWidgetTypeShow () {
      return ['/KPIs', '/Widgets', '/Slicer'].includes(this.$route.path)
    },
    comIsDashboardShow() {
      return ['/Dashboards','/CrossTenantDashboard' ].includes(this.$route.path)
    }
  },

  methods: {
    onCollapse () {
      this.currentCollapse = !this.currentCollapse
      this.$emit('event:collapse')
    },
    onChange () {
      this.$emit('event:change')
    },
    onDeleteAll () {
      this.$emit('input', {})
      this.$emit('event:change')
    },
    layoutListsOfwidget (type) {
      var tempList = []
      if (type === 'slicer') {
        tempList = this._.reject(this._.reject(this._.reject(this._.reject(this._.reject(dashboardGadgetList, { key: '' }), { group: '' }), { group: 'customized' }), { group: 'inDev' }), { type: 'widget' })
      } else {
        tempList = this._.reject(this._.reject(this._.reject(this._.reject(this._.reject(dashboardGadgetList, { key: '' }), { group: '' }), { group: 'customized' }), { group: 'inDev' }), { type: 'slicer' })
      }
      if (!this.$hasPermission('sys:widget:status:in-dev')) {
        tempList = this._.reject(tempList, { status: 'In-Dev' })
      }
      if (!this.$hasPermission('sys:widget:status:published')) {
        tempList = this._.reject(tempList, { status: 'Published' })
      }
      return tempList
    },
  }
}
</script>

<style lang="scss">
.b-filter {
  background-color: #f6f7f9;
  white-space: nowrap;

  &__top {
    padding: 6px 16px;

    &-left {
      img {
        margin-right: 10px;
      }
    }
  }

  &__content {
    padding: 6px 16px;
    height: auto;

    &-item {
      margin-bottom: 10px;

      & > span {
        padding-bottom: 5px;
        font-size: 14px;
        font-weight: 400;
        color: #404040;
        line-height: 20px;
      }

      .el-input-number {
        line-height: 26px !important;
      }

      & > .el-date-editor {
        .el-input__icon {
          line-height: 26px !important;
        }

        .el-range-separator {
          line-height: 22px !important;
        }
      }
    }
  }

  &--collapse {
    background: #ffffff;

    &:hover {
      background-color: #f6f7f9;
    }

    .b-filter__content {
      height: 0;
      padding: 0 16px;
    }
  }
}

.user-popper {
  &-item {
    .el-avatar {
      width: 28px !important;
      height: 28px !important;
      line-height: 28px;
      text-align: center;
      margin-right: 10px;
      border-radius: 50%;
    }
  }

  .el-select-dropdown__item {
    &.selected {
      .icon_checkmark {
        opacity: 1;
      }
    }

    .icon_checkmark {
      opacity: 0;
    }
  }
}
</style>
